<template>
  <el-space wrap :size="50">
    <el-card class="box-card" style="width: 250px">
      <template #header>
        <div class="card-header">
          <span>我写的文章</span>
        </div>
      </template>
      <div v-for="o in essaylist" :key="o" class="text item">
        {{ o.titleName }} &nbsp; &nbsp; &nbsp; &nbsp;
        <el-link type="primary" @click="continueEdit(o.titleId)"
          >继续编辑</el-link
        >
      </div>
    </el-card>

    <el-card class="box-card" style="width: 250px">
      <template #header>
        <div class="card-header">
          <span>我创建的试卷</span>
        </div>
      </template>
      <div v-for="o in examlist" :key="o" class="text item">
        {{ o.examName }} &nbsp; &nbsp; &nbsp; &nbsp;
        <el-link type="primary" @click="exportWord(o.examId)">导出</el-link>
      </div>
    </el-card>

    <el-card class="box-card" style="width: 250px">
      <template #header>
        <div class="card-header">
          <span>我创建的试题</span>
        </div>
      </template>
      <div v-for="o in topiclist" :key="o" class="text item">
        <span> {{ o.topicContent }} </span> {{ o.topicName }} &nbsp; &nbsp;
        &nbsp; &nbsp;
        <el-link type="primary" @click="topicEdit(o.topicId)">继续编辑</el-link>
      </div>
    </el-card>
  </el-space>
</template>

<script setup>
import { getTeacherInfo } from "@/api/teacher"
import { onMounted, ref } from "vue-demi"
import { useRouter } from "vue-router";
import { getWordLink } from "@/api/exam"
const essaylist = ref("")
const topiclist = ref("")
const examlist = ref("")
const card = ref("")
const router = useRouter()
function continueEdit (id) {
  router.push({ path: "addEssay", query: { id: id } })
}
function exportWord (id) {


  getWordLink(id).then((res) => {

    const link = res.data
    console.log(link);
    window.open(link)
  })

}
function topicEdit (id) {
  router.push({ query: { id: id }, path: '/teacher/addTopic' })
}
//获取数据
const getInfo = onMounted(() => {
  getTeacherInfo().then((res) => {
    console.log(res);
    essaylist.value = res.essay
    topiclist.value = res.title
    examlist.value = res.exam
  })

})
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>